import { createStyles } from 'antd-style';
import type { ProAliasToken } from '@ant-design/pro-provider';

const useStyles = createStyles(
  ({ css }, props: { proToken: ProAliasToken }) => {
    const { proToken } = props;
    return {
      hua: css`
        margin-left: 100px;
        // 将select的背景颜色与边框设置成Header的背景颜色，并且把字体与菜单的颜色设置成一样，无!important 不会覆盖
        .ant-select-selector {
          background-color: ${proToken?.layout?.header
            ?.colorBgHeader} !important;
          border-color: ${proToken?.layout?.header?.colorBgHeader} !important;
          color: ${proToken?.layout?.header?.colorTextMenu} !important;
        }

        //展开下拉框的时候，字体也是与菜单的颜色设置成一样
        .ant-select-selection-item {
          color: ${proToken?.layout?.header?.colorTextMenu} !important;
        }

        //下拉箭头的颜色与菜单的颜色设置成一样
        .anticon > svg {
          color: ${proToken?.layout?.header?.colorTextMenu} !important;
        }
      `,
    };
  },
);

export default useStyles;